@charset "utf-8";
@import "common/reset";
@function c($px) {
    @return $px/2;
}

$color:#ff9344;
.web {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    header {
        position: absolute;
        padding: c(17px) 0 c(10px);
        width: 100%;
        .header_left {
            line-height: c(58px);
            text-align: center;
            button {
                margin-top: c(33px);
                width: c(123px);
                height: c(58px);
                border: 1px solid $color;
                background-color: white;
                border-radius: c(17px);
                font-size: c(26px);
                color: black;
            }
        }
        .header_right {
            width: c(163px);
            height: c(69px);
            margin-right: c(21px);
            margin-top: c(30px);
            border: c(3px) solid $color;
            position: relative;
            &::after {
                content: "";
                width: 0;
                height: 0;
                border-top: c(16px) solid $color;
                border-left: c(15px) solid transparent;
                border-right: c(15px) solid transparent;
                position: absolute;
                right: c(14px);
                top: c(25px);
            }
            select {
                width: 100%;
                height: 100%;
                border: none;
                padding-left: c(14px);
                -webkit-appearance: none;
            }
        }
        .header_center {
            p {
                text-align: center;
                padding-top: c(49px);
                font-size: c(26px);
                a {
                    color: black;
                }
            }
            position: relative;
            i {
                position: absolute;
                top: c(131px);
                right: c(76px);
                font-size: c(37px);
                color: $color;
            }
            input {
                width: c(270px);
                height: c(54px);
                border: 1px solid $color;
                border-radius: c(54px);
                margin-top: c(37px);
                margin-left: c(74px);
                padding-left: c(20px);
                font-size: c(24px);
                color: white;
            }
        }
    }
    section {
        width: 100%;
        position: absolute;
        left: 0;
        top: 101px;
        overflow-y: auto;
        bottom: 72px;
        padding: 0 c(20px);
        .title {
            width: 100%;
            margin-top: c(31px);
            p {
                text-align: center;
                font-size: c(26px);
            }
            >table {
                width: c(514px);
                height: c(131px);
                margin: c(16px) auto c(20px);
                border: c(3px) solid white;
               
                tr {
                    td {
                        
                        width: c(124px);
                        text-align: center;
                        background-color: #dcdcdc;
                        font-size: c(20px);
                        color: #898989;
                    }
                    td:nth-of-type(2) {
                        width: c(124px);
                        text-align: center;
                        background-color: #dcdcdc;
                        font-size: c(20px);
                        color: #898989;
                    }
                }
            }
        }
        .t_shop {
            width: 100%;
            .t_shop_head {
                width: 100%;
                p {
                    font-size: c(30px);
                   
                    vertical-align: middle;
                    >i {
                        font-size: c(56px);
                        color: $color;
                        vertical-align: middle;
                        padding-right: c(10px);
                        padding-left: c(21px);
                    }
                    span {
                        float: right;
                        font-size: c(24px);
                        padding-top: c(10px);
                        i {
                            font-size: c(27px);
                            color: $color;
                            vertical-align: middle;
                            padding-right: c(10px);
                        }
                    }
                }
            }
            .table_img {
                width: 100%;
                table {
                    border: c(10px) solid white;
                    width: c(709px);
                    height: c(355px);
                    margin: 0 c(24px) c(0px);
                    tr:nth-of-type(1){
                        td{
                            width: c(280px);
                            height: c(355px);
                            img{
                               height: 100%;
                            }
                        }
                         td:nth-of-type(2){
                            width: c(420px);
                            height: c(149px);
                            img{
                               width: 100%;
                            }
                        }
                    }
                     tr:nth-of-type(2){
                        td{
                            width: c(195px);
                            height: c(198px);
                            img{
                               height: 100%;
                            }
                        }
                         
                    }
                }
            }
            .hot_img{
                width: c(709px);
                height: c(200px);
                margin: c(0px) auto c(0px);
                .left{
                    width: c(230px);
                    height: c(200px);
                    img{
                        width: 100%;
                    }
                }
                .center{
                    margin: 0 c(8px);
                    width: c(230px);
                    height: c(200px);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                 .right{
                    width: c(230px);
                    height: c(200px);
                    img{
                      width: 100%;
                      height: 100%;
                    }
                }
            }
        }
    }
    footer {
        padding: c(15px) 0;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        ul {
            li {
                width: 25%;
                text-align: center;
                a {
                    display: block;
                    color: #000000;
                    font-size: c(26px);
                    .my_icon {
                        color: $color;
                        font-size: c(72px);
                    }
                }
            }
        }
    }
}